<style>
.errorcls input,.errorcls label{float: left;}
#login{margin: 0 auto;padding: 0;width: 420px;}
#login div.color{left: auto;right: auto;margin: 10px auto 0 auto;padding: 3px 3px 3px 0;clear: both;overflow: hidden;background: #FFFFFF;}
#login div.color a{margin: 0 0 0 3px;padding: 0;width: 20px;height: 20px;display: block;float: left;}
#login div.inner{margin: 0 auto;padding: 20px;width: 400px;background-color: #FFFFFF;border-top: none;border-bottom: none;}
#login div.form{margin: 0;padding: 0;clear: both;overflow: hidden;}
#login div.form div.fields{margin: 0;padding: 0;clear: both;overflow: hidden;}
#login div.form div.fields div.field{margin: 0;padding: 0 0 10px 0;clear: both;overflow: hidden;}
#login div.form div.fields div.field span.error{margin: 8px 0 0 0;padding: 0;height: 1%;display: block;color: #FF0000;}
#login div.form div.fields div.field label.error{margin: 8px 0 0 0;padding: 0;height: 1%;display: block;color: #FF0000;clear:both;}
#login div.form div.fields div.field div.label{margin: 2px 10px 0 0;padding: 5px 0 0 5px;width: 173px;float: left;text-align: right;}
#login div.form div.fields div.field div.label label{color: #000000;font-weight: bold;}
#login  div.form div.fields div.field div.label span{margin: 0;padding: 2px 0 0 0;height: 1%;display: block;color: #363636;}
#login div.form div.fields div.field div.input{margin: 0;padding: 0;float: left;}
#login div.form div.fields div.field div.input input{margin: 0;padding: 7px 7px 6px 7px;width: 176px;background: #FFFFFF;border-top: 1px solid #b3b3b3;border-left: 1px solid #b3b3b3;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;color: #000000;font-family:Verdana, Arial, sans-serif;font-size: 11px;}
#login div.form div.fields div.field div.input  input.error{background: #FBE3E4;border-top: 1px solid #e1b2b3;border-right: 1px solid #FBC2C4;border-bottom: 1px solid #FBC2C4;}
#login div.form div.fields div.field div.input  input.success{background: #E6EFC2;border-top: 1px solid #cebb98;border-left: 1px solid #cebb98;border-right: 1px solid #c6d880;	border-bottom: 1px solid #c6d880;}
#login div.form div.fields div.field div.input div.link{margin: 6px 0 0 0;padding: 0;text-align: right;}
#login div.form div.fields div.field div.checkbox{margin: 0 0 0 184px;padding: 0;}
#login div.form div.fields div.field div.checkbox label{color: #565656;font-weight: bold;}
#login div.form div.fields div.buttons{margin: 0;padding: 10px 0 0 0;clear: both;overflow: hidden;border-top: 1px solid #DDDDDD;text-align: right;}
#login div.form div.fields div.buttons input{margin: 0;color: #000000;font-size: 1.0em;font-weight: bold;font-family: Verdana, Helvetica, Sans-Serif;}
#login div.form div.fields div.buttons input.ui-state-default{margin: 0;padding: 6px 12px 6px 12px;background-color: #e5e3e3;border-top: 1px solid #DDDDDD;border-left: 1px solid #c6c6c6;border-right: 1px solid #DDDDDD;border-bottom: 1px solid #c6c6c6;color: #515151;}
#login div.form div.fields div.buttons input.ui-state-hover{margin: 0;padding: 6px 12px 6px 12px;background-color: #b4b4b4;border-left: 1px solid #bebebe;border-right: 1px solid #b1b1b1;border-bottom: 1px solid #afafaf;color: #515151;}
#login div.form a:link, #login div.form a:visited{padding: 0 0 2px 0;clear: both;overflow: hidden;color:#006;}
</style>
 <?php  echo $html->script(array("jquery.min.js","jquery.form.js","jquery.validate.js","datepicker.js","jquery.pagination.js","jquery-ui.js")); ?>
<?php
echo $this->Html->css('datepicker');
?>
<script type="text/javascript">
// <![CDATA[
function pad(value, length) {
        length = length || 2;
        return "0000".substr(0,length - Math.min(String(value).length, length)) + value;
};
// ]]>
</script>
<div id="result">
<h5>Forgot Password</h5>

<div id="login">
<div class="inner">
				<form method="post" id="add_admin" name="add_admin" action="<?php echo Configure::read('base_url')."users/forget_password";?>">
				<div class="form">
					<!-- fields -->
					<div class="fields">
						<div class="field">
							<div class="label">
								<label for="username">User ID:</label>
							</div>
							<div class="input">
							 <input type="text"  class="required"  name="data[User][username]" size="40"/>
							</div>
						</div>
						<div class="field">
							<div class="label">
								<label for="password">Email:</label>
							</div>
							<div class="input">
							  <input type="text"  class="required email"  name="data[User][email]" size="40"/>
							</div>
						</div>
                        <div class="field">
							<div class="label">
								<label for="password">Date of Birth:</label>
							</div>
                            
                                                        <div class="input errorcls">
	 <input type="text" readonly class="w16em required" id="selectDate" name="data[User][dateofbirth]" size="40"/>
        <?php
        /*echo $this->Form->input('User.dateofbirth',array('label'=>false,'div'=>false,
            'class'=>'required','minYear'=>1900));*/
        ?>
<script type="text/javascript">
     var today     = new Date(),
            // low range, 35 days before today's date
            //rangeLow  = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 35),
			// low range, form today's date
            rangeLow  = new Date(today.getFullYear()-150, today.getMonth(), today.getDate()),
            // high range, one year after today's date
            rangeHigh = new Date(today.getFullYear()-18, today.getMonth(), today.getDate())

        var opts = {
                formElements:{"selectDate":"Y-ds-m-ds-d"},
                showWeeks:true,
                statusFormat:"l-cc-sp-d-sp-F-sp-Y",
                // Set some dynamically calculated ranges
                rangeLow:rangeLow.getFullYear() + "" + pad(rangeLow.getMonth()+1) + pad(rangeLow.getDate()),
                rangeHigh:rangeHigh.getFullYear() + "" + pad(rangeHigh.getMonth()+1) + pad(rangeHigh.getDate())

        };
        if(jQuery("#fd-selectDate").html()!=null){
           jQuery('#fd-selectDate').remove();
        }
        datePickerController.createDatePicker(opts);
     // <![CDATA[
      /* var opts = {
                formElements:{"selectDate":"Y-ds-m-ds-d"},
                showWeeks:true,
                // Show a status bar and use the format "l-cc-sp-d-sp-F-sp-Y" (e.g. Friday, 25 September 2009)
                statusFormat:"l-cc-sp-d-sp-F-sp-Y"
        };
        //alert(jQuery("#fd-selectDate").html());
        if(jQuery("#fd-selectDate").html()!=null){
           jQuery('#fd-selectDate').remove();
        }
        datePickerController.createDatePicker(opts);*/
// ]]>
</script>
							</div>
						</div>
                        <div class="field">
                          <div class="input">Enter the text as appears in the image</div>
					  </div>
                        <div class="field">
							<div class="label" style="padding-top:0;"><img src="<?php echo $html->url('/users/captcha'); ?>" width="120px"  height="30px"/></div>
							<div class="input"> 
                         <?php //echo $this->Form->hidden('User.cap1',array('id'=>'cap1','name'=>'cap1'));
        echo $this->Form->input('User.cap2',array('label'=>false,'id'=>'cap2','name'=>'cap2','div'=>false,'class'=>'required','size'=>'8','style'=>'float:left;margin-right:10px;'));
       
 ?></div>
						</div>

<div class="buttons">
							<input type="submit" value="Send Password" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
						</div>
					</div>
					<!-- end fields -->
					<!-- links --><!-- end links -->
				</div>
				</form>
			</div>
</div>
</div>
<script type="text/javascript">
    function pageselectCallback(page_index, jq, items_per_page){
		page_index = page_index ==0 ? 1 : (page_index+1);
		var startIndex = parseInt(((page_index - 1) * items_per_page));
		var endIndex = parseInt(((page_index) * items_per_page));
		jQuery('#Searchresult ul').empty();
		jQuery('#hiddenresult ul li').each(function(i,obj){
			if(startIndex <= i && i < endIndex ){
				var new_content = jQuery(obj).clone();
				jQuery('#Searchresult ul').append(new_content);
			}
		});
		var totalPage = 0;
		try{
			totalPage = Math.ceil(parseInt(jQuery('#hiddenresult ul li').size())/items_per_page);
		}catch(ex){

		}
		jQuery('#pagePositionNum').empty().html('Page '+page_index+' of '+totalPage);
		return false;
	}
 jQuery(document).ready(function(){
      jQuery('#viewNumPageItem ul li a').live('click',function(){
                    var $href = jQuery(this).attr('href');
                    $href = parseInt($href.replace('#',''));
                    // count entries inside the hidden content
                    var num_entries = jQuery('#hiddenresult ul li').length;

                    // Create content inside pagination element
                    jQuery("#Pagination").empty().pagination(num_entries, {
                        callback: pageselectCallback,
                        items_per_page: $href // Show only one item per page
                    });
                    jQuery(this).closest('ul').find('li span').each(function(i,$this){
                        var pageNum = jQuery(this).html();
                        jQuery(this).closest('li').empty().html('<a href="#'+pageNum+'">'+pageNum+'</a>');
                    });
                    jQuery(this).closest('li').empty().html('<span>'+$href+'</span>');
                    return false;
                }).eq(0).trigger('click') ;

                jQuery('#gotoPage button').click(function(){
                    var $pageNum = parseInt(jQuery('#gotoPage input[type=text]').val());
                    $pageNum = $pageNum - 1;
                    jQuery("#Pagination").trigger('setPage', [$pageNum]);
                });
                //initPagination();

		var v = jQuery("#add_admin").validate({
                    rules: {
                     cap2: {
                    required: true,
                     remote: {
                    url: baseurl+"users/capcheck",
                    type: "post",
                    data: {
                      cap2: function() {
                        return jQuery("#cap2").val();
                      }
                    }
                  }
                    }
                  },
          messages: {
               cap2: {
                   remote:'Please enter the same value again.'
               }
               },
      submitHandler: function(form) {
				jQuery(form).ajaxSubmit({
					target: "#result"
				});
			}
		});
});
 </script>